<template>
  <div class="dashboard-container">
    <div class="common-functions">
      <h3 class="section-title">常用功能</h3>
      <div class="function-list">
        <div class="function-item" @click="handleLink('/system/user')">
          <img src="../../assets/404_images/set.png" />
          <span>用户管理</span>
        </div>
        <div class="function-item" @click="handleLink('/system/user')">
          <img src="../../assets/404_images/sh.png" />
          <span>入驻审核</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/good.png" @click="handleLink()" />
          <span>商品设置</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/order.png" @click="handleLink()" />
          <span>订单管理</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/change.png" @click="handleLink()" />
          <span>以旧换新</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/share.png"  @click="handleLink()"/>
          <span>分享分销</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/rk.png"  @click="handleLink()"/>
          <span>入库管理</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/ck.png"  @click="handleLink()"/>
          <span>出库管理</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/cangku.png"  @click="handleLink()"/>
          <span>库存管理</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/wl.png" @click="handleLink()" />
          <span>物流管理</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/wl.png" @click="handleLink()" />
          <span>物流管理</span>
        </div>
        <div class="function-item">
          <img src="../../assets/404_images/kf.png" @click="handleLink()" />
          <span>售后服务</span>
        </div>
      </div>
    </div>

    <div class="new-third-indicators">
      <h3 class="section-title">数据概览</h3>
      <div class="indicator-list">
        <div
          class="indicator-item"
          v-for="(item, index) in newThirdIndicators"
          :key="index"
        >
          <div class="indicator-value" :class="getTrendClass(item.trend)">
            <count-to
              :start-val="0"
              :end-val="item.value"
              :duration="2000"
              :delay="1000"
            ></count-to>
          </div>
          <div class="indicator-name">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <div class="financial-indicators">
      <h3 class="section-title">订单概览</h3>
      <div class="indicator-card-list">
        <div
          class="indicator-card"
          v-for="(item, index) in financialIndicators"
          :key="index"
        >
          <div class="card-title">
            <span>{{ item.label }}</span>
          </div>
          <div class="card-value">
            <count-to
              :start-val="0"
              :end-val="item.value"
              :duration="1500"
              :delay="1000"
            ></count-to>
            <div class="status">
              <div class="item" title="待发货">
                <i class="dot" style="background: red;" ></i>
                11
              </div>
              <div class="item" title="待收货">
                <i class="dot" style="background: #0d53d3;" ></i>
                0
              </div>
              <div class="item" title="已完成">
                <i class="dot" style="background: #67c23a;" ></i>
                0
              </div>
              <div class="item" title="已取消">
                <i class="dot" style="background: #909399;" ></i>
               2
              </div>
              <div class="item" title="已归还">
                <i class="dot" style="background: #2c7807;" ></i>
                3
              </div>
              <div class="item" title="待归还">
                <i class="dot" style="background: #d37a0d;" ></i>
                3
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <div class="chart" ref="chart" style="width: 100%; height: 600px"></div>
      </el-col>
      <el-col :span="12" :offset="0">
        <div
          class="chart"
          ref="chart2"
          style="width: 100%; height: 600px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getUerInfo } from "@/api/user";
import CountTo from "vue-count-to";
import { hasBtnAuth } from "@/utils";
import { Message } from "element-ui";
export default {
  name: "Dashboard",
  components: {
    CountTo,
  },
  data() {
    return {
      // 新三板指标数据
      newThirdIndicators: [
        { value: 111, name: "平台用户数", trend: "" },
        { value: 78, name: "平台订单数", trend: "up" },
        { value: 88, name: "总交易额", trend: "down" },
        { value: 58, name: "商家数", trend: "up" },
        { value: 76, name: "平台用户数", trend: "up" },
        { value: 76, name: "平台用户数", trend: "down" },
      ],
      // 财务指标数据
      financialIndicators: [
        { icon: "icon-total-profit", label: "共享商品订单", value: 321 },
        { icon: "icon-cash", label: "新品商品订单", value: 324 },
        { icon: "icon-bank-deposit", label: "配件商订单", value: 221 },
        { icon: "icon-inventory", label: "二手商订单", value: 123 },
        { icon: "icon-accounts-receivable", label: "以旧换新订单", value: 324 },
      ],
      myChart: null,
      myChart2: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
    // getUerInfo({});
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    // 获取趋势对应的样式类名
    getTrendClass(trend) {
      return (
        {
          up: "up-trend",
          down: "down-trend",
        }[trend] || ""
      );
    },
    initChart() {
      this.myChart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: "平台每日消费",
        },
        tooltip: {},
        legend: {
          data: ["消费金额"],
        },
        xAxis: {
          data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06"],
        },
        yAxis: {},
        series: [
          {
            name: "消费金额",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            barWidth: "30%",
            itemStyle: {
              color: "#409EFF",
            },
          },
        ],
      };
      this.myChart.setOption(option);

      this.myChart2 = echarts.init(this.$refs.chart2);
      const option2 = {
        title: {
          text: "环占比",
          left: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          show: true,
          orient: "vertical",
          left: "left",
          top: "center",
          data: [
          { name: "共享商品", value: 335 },
            { name: "新品商品", value: 335 },
            { name: "二手商品", value: 310 },
            { name: "配件商品", value: 234 },
          ].map((item) => item.name),
        },
        series: [
          {
            name: "环占比",
            type: "pie",
            radius: "80%", // 饼图半径（相对容器）
            center: ["50%", "50%"], // 饼图中心位置
            data: [
          { name: "共享商品", value: 335 },
            { name: "新品商品", value: 335 },
            { name: "二手商品", value: 310 },
            { name: "配件商品", value: 234 },
            ],
            // 扇区样式
            itemStyle: {
              borderRadius: 14,
              borderColor: "#fff", 
              borderWidth: 5, 
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{d}%", 
              fontSize: 12,
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 20,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.3)",
              },
            },
          },
        ],
      };
      this.myChart2.setOption(option2);
    },

    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
        this.myChart2.resize();
      }
    },
    handleLink(url,str){
      if(!url){
        Message.error('开发中')
        return
      }
      if(hasBtnAuth('btn_sysMenuAdmin_add')){
        this.$router.push(url)
      }else{
        Message.error('没有权限')
      }

    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  margin: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 18px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 16px;
  }

  .common-functions {
    margin-bottom: 45px;
    .function-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 50px;
        cursor: pointer;
        width: 70px;
        height: 70px;
        border-radius: 5px;
        transition:transform .3s ease;
        img {
          margin-bottom: 10px;
          width: 32px;
          height: 32px;
          display: inline-block;
          background-size: cover;
          background-repeat: no-repeat;
        }

        span {
          font-size: 14px;
          color: #666;
        }
        &:hover {
          border: 1px solid #0a78e7;
          transform: scale(1.2);
        }
      }

      .customize-btn {
        margin-left: auto;
        color: #409eff;
        cursor: pointer;
        font-size: 14px;
      }
    }
  }

  .new-third-indicators {
    margin-bottom: 24px;

    .indicator-list {
      display: flex;
      flex-wrap: wrap;

      .indicator-item {
        width: 16.666%;
        text-align: center;
        margin-bottom: 16px;

        .indicator-value {
          font-size: 22px;
          margin-bottom: 4px;
          font-weight: 500;

          &.up-trend {
            color: #f56c6c; // 红
          }

          &.down-trend {
            color: #67c23a; // 绿
          }
        }

        .indicator-name {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .financial-indicators {
    .indicator-card-list {
      display: flex;
      flex-wrap: wrap;
      .indicator-card {
        width: 18%;
        padding:5px 16px;
        border: 1px solid #e3e4e5;
        margin-right: 25px;
        margin-bottom: 16px;
        box-sizing: border-box;
        .card-title {
          display: flex;
          align-items: center;
          margin-bottom: 18px;
          margin-top: 5px;

          i {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 4px;
            background-size: cover;
            background-repeat: no-repeat;
          }

          span {
            font-size: 14px;
            color: #666;
          }
        }

        .card-value {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          display: flex;
          overflow: hidden;
          .status{
            display: flex;
            margin-left: 20px;
            flex-wrap: wrap;
            .item{
              margin: 0 12px;
              display: flex;
              align-items: center;
              font-size: 12px;
              margin-bottom: 15px;
              .dot{
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: red;
                position: relative;
                top: -1px;
                margin-right: 2px;
              }
            }
          }
        }
      }

      .customize-btn {
        margin-left: auto;
        color: #409eff;
        cursor: pointer;
        font-size: 14px;
        align-self: center;
      }
    }
  }
}
.chart{
  border: 1px solid #ebebeb;
}
</style>
